<template>
	<div class="detail-container">
		<layout>
			<div class="main-container" ref="mainContainerRef" v-loading="isDataLoading">
				<blog-detail :blog="data" v-if="data"> </blog-detail>
				<blog-comment v-if="!isDataLoading"></blog-comment>
			</div>
			<template #right>
				<blog-toc :toc="data.toc" v-if="data"></blog-toc>
			</template>
		</layout>
	</div>
</template>

<script>
import fetchData from '@/mixins/fetchData'
import { getBlogById } from '@/api/blog'
import Layout from '@/components/Layout'
import BlogDetail from './BlogDetail'
import BlogToc from './BlogToc'
import BlogComment from './BlogComment'
import mainScroll from '@/mixins/mianScroll'
// 导入util设置标题函数
import titleController from '@/utils/titleController'
export default {
	name: 'Detail',
	mixins: [fetchData(null), mainScroll('mainContainerRef')],
	components: { Layout, BlogDetail, BlogToc, BlogComment },
	methods: {
		async fetchData() {
			const res = await getBlogById(this.$route.params.id)
			if (!res) {
				// 文章不存在
				this.$router.push('/404')
				return
			}
			titleController.setRouteTitle(res.title)
			return res
		},
	},
	mounted() {
		this.hash = location.hash
		location.hash = ''
	},
	updated() {
		// 把hash值保存下然后清空，然后再赋值，这样锚点才有效
		this.$nextTick(() => {
			location.hash = this.hash
		})
	},
}
</script>

<style lang="less" scoped>
.detail-container {
	width: 100%;
	height: 100%;
}
.main-container {
	width: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	height: 100%;
	box-sizing: border-box;
	padding: 15px;
	scroll-behavior: smooth;
}
</style>
